<!-- templates/menu/temperature_map.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中国城市温度分布图</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0f172a;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            color: #0ea5e9;
        }

        .back-btn {
            background-color: #3b82f6;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .back-btn:hover {
            background-color: #2563eb;
        }

        .chart-container {
            background-color: #1e293b;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }

        .filter-container {
            display: flex;
            justify-content: center;
            margin: 15px 0;
            gap: 15px;
        }

        .filter-item {
            background-color: #334155;
            padding: 8px 15px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        select {
            background-color: #1e293b;
            color: #e2e8f0;
            border: 1px solid #94a3b8;
            border-radius: 4px;
            padding: 5px 10px;
            min-width: 150px;
        }

        .timeline-container {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .timeline-item {
            background-color: #334155;
            color: #e2e8f0;
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .timeline-item:hover, .timeline-item.active {
            background-color: #0ea5e9;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">中国各省份重点城市温度分布图</div>
        </div>

        <div class="filter-container">
            <div class="filter-item">
                <label for="provinceSelect">类别:</label>
                <select id="provinceSelect">
                    <option value="">全部重点城市</option>
                </select>
            </div>
            <div class="filter-item">
                <label for="dateSelect">日期:</label>
                <select id="dateSelect">
                    <option value="">全部年份</option>
                </select>
            </div>
        </div>

        <div class="chart-container">
            <div id="temperatureChart" style="width: 100%; height: 700px;"></div>

            <div class="timeline-container">
                <div class="timeline-item active" onclick="changeView(0)">最高温度</div>
                <div class="timeline-item" onclick="changeView(1)">最低温度</div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        var chart = echarts.init(document.getElementById('temperatureChart'), null, {renderer: 'canvas'});

        // 深色科技风格的配色方案
        const COLORS = {
            primary: '#0ea5e9',        // 主色 - 亮蓝色
            secondary: '#10b981',      // 辅助色 - 翡翠绿
            accent: '#8b5cf6',         // 强调色 - 紫色
            dark: '#0f172a',           // 深色背景
            light: '#e2e8f0',          // 浅色文本
            medium: '#94a3b8',         // 中等色文本
            regions: [                 // 地图区域颜色渐变
                '#0ea5e9', '#3b82f6', '#60a5fa',
                '#93c5fd', '#bfdbfe', '#dbeafe',
                '#f3f4f6', '#f97316', '#ea580c'
            ]
        };

        // 从URL获取参数
        function getQueryParam(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }

        // 初始化数据
        let currentData = [];
        let currentView = 0; // 0: 最高温度, 1: 最低温度

        // 加载最高温度数据
        function loadHighTempData() {
            const province = document.getElementById('provinceSelect').value;
            const date = document.getElementById('dateSelect').value;

            fetch(`/map/high_temp_data?province=${province}&date=${date}`)
                .then(response => response.json())
                .then(data => {
                    currentData = data;
                    updateChart();
                })
                .catch(error => {
                    console.error('加载最高温度数据失败:', error);
                    alert('数据加载失败，请稍后再试');
                });
        }

        // 加载最低温度数据
        function loadLowTempData() {
            const province = document.getElementById('provinceSelect').value;
            const date = document.getElementById('dateSelect').value;

            fetch(`/map/low_temp_data?province=${province}&date=${date}`)
                .then(response => response.json())
                .then(data => {
                    currentData = data;
                    updateChart();
                })
                .catch(error => {
                    console.error('加载最低温度数据失败:', error);
                    alert('数据加载失败，请稍后再试');
                });
        }

        // 更新图表
        function updateChart() {
            const option = {
                backgroundColor: COLORS.dark,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(30, 41, 59, 0.9)',
                    borderColor: COLORS.primary,
                    borderWidth: 1,
                    padding: 10,
                    textStyle: {
                        color: COLORS.light,
                        fontFamily: 'Inter, sans-serif'
                    },
                    formatter: ({ name, value }) => `
                        <div style="font-size: 14px; padding: 5px;">
                            <div style="font-weight: bold; margin-bottom: 5px;">${name}</div>
                            <div>温度: ${value}°C</div>
                        </div>
                    `
                },
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 35,
                    orient: 'vertical',
                    left: '10',
                    bottom: '20',
                    pieces: [
                        {min: 28, color: COLORS.regions[8]},
                        {min: 23, max: 27.9, color: COLORS.regions[7]},
                        {min: 18, max: 22.9, color: COLORS.regions[4]},
                        {min: 13, max: 17.9, color: COLORS.regions[3]},
                        {min: 8, max: 12.9, color: COLORS.regions[2]},
                        {min: 0, max: 7.9, color: COLORS.regions[1]}
                    ],
                    textStyle: {
                        color: COLORS.medium
                    },
                    itemWidth: 15,
                    itemHeight: 15,
                    backgroundColor: 'rgba(30, 41, 59, 0.7)',
                    borderColor: COLORS.medium,
                    borderWidth: 1
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            title: '保存为图片',
                            backgroundColor: COLORS.dark,
                            pixelRatio: 2
                        },
                        restore: {
                            show: true,
                            title: '重置'
                        }
                    },
                    right: '20',
                    top: '20',
                    iconStyle: {
                        normal: {
                            color: COLORS.medium
                        },
                        emphasis: {
                            color: COLORS.primary
                        }
                    }
                },
                series: [
                    {
                        name: currentView === 0 ? '最高温度 (°C)' : '最低温度 (°C)',
                        type: 'map',
                        map: 'china',
                        roam: true,
                        zoom: 1.2,
                        label: {
                            show: true,
                            color: COLORS.light,
                            fontSize: 10,
                            formatter: function(params) {
                                return params.name;
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#1e293b',
                                borderColor: '#334155',
                                borderWidth: 0.8
                            },
                            emphasis: {
                                areaColor: COLORS.primary,
                                shadowBlur: 20,
                                shadowColor: 'rgba(14, 165, 233, 0.5)'
                            }
                        },
                        data: currentData
                    }
                ]
            };

            chart.setOption(option);
        }

        // 切换视图函数
        function changeView(index) {
            const timelineItems = document.querySelectorAll('.timeline-item');
            timelineItems.forEach((item, i) => {
                if (i === index) {
                    item.classList.add('active');
                    currentView = index;
                    if (index === 0) {
                        loadHighTempData();
                    } else {
                        loadLowTempData();
                    }
                } else {
                    item.classList.remove('active');
                }
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化图表
            loadHighTempData();

            // 省份选择变化时重新加载数据
            document.getElementById('provinceSelect').addEventListener('change', loadHighTempData);
            document.getElementById('dateSelect').addEventListener('change', loadHighTempData);

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                chart.resize();
            });
        });
    </script>
</body>
</html>